<template>
  <div class="moment-skeleton">
    <div class="skeleton-content">
      <!-- 文字内容骨架 -->
      <div class="skeleton-text">
        <div class="skeleton-line long"></div>
        <div class="skeleton-line medium"></div>
        <div class="skeleton-line short"></div>
      </div>

      <!-- 图片骨架 -->
      <div class="skeleton-images">
        <div class="skeleton-image"></div>
        <div class="skeleton-image"></div>
        <div class="skeleton-image"></div>
      </div>

      <!-- 底部信息骨架 -->
      <div class="skeleton-meta">
        <div class="skeleton-time"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .moment-skeleton {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    animation: skeleton-loading 1.5s ease-in-out infinite;
  }

  .skeleton-content {
    .skeleton-text {
      margin-bottom: 1rem;

      .skeleton-line {
        height: 1rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        margin-bottom: 0.5rem;
        animation: skeleton-shimmer 1.5s ease-in-out infinite;

        &.long {
          width: 100%;
        }

        &.medium {
          width: 80%;
        }

        &.short {
          width: 60%;
        }
      }
    }

    .skeleton-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin-bottom: 1rem;

      .skeleton-image {
        aspect-ratio: 1;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
      }
    }

    .skeleton-meta {
      padding-top: 0.75rem;
      border-top: 1px solid var(--border-color);

      .skeleton-time {
        width: 120px;
        height: 0.8rem;
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        animation: skeleton-shimmer 1.5s ease-in-out infinite;
      }
    }
  }

  @keyframes skeleton-shimmer {
    0% {
      opacity: 0.6;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 0.6;
    }
  }

  @keyframes skeleton-loading {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2px);
    }
    100% {
      transform: translateY(0);
    }
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .moment-skeleton {
      padding: 1rem;
    }

    .skeleton-images {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
